<template>
	<x-border :border="border" icon="icon-5333-wubfen" v-if="appendPara">
		<x-table ref="xTable" type="ProductTable" :appendPara="appendPara" v-if="appendPara"> </x-table>
	</x-border>
</template>
<script>
	export default {
		props: {
			widgetData: {}
		},
		data() {
			return {
				reload: true, // 是否刷新
				priceStyleId: null,
				border: {
					title: null,
					description: null
				},
				appendPara: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if (this.widgetData && this.widgetData.value) {
					this.priceStyleId = this.widgetData.value.priceStyleId
				}
				if (!this.priceStyleId) {
					this.$ala.alert('商城模式不正确,请在DIY系统中配置')
				}
				this.border = await this.$ala.httpGet('api/ProductDetail/PriceStyleBorder', {
					id: this.priceStyleId
				})
				this.appendPara = {
					priceStyleId: this.priceStyleId
				}
			},
			// 监听 x-widget值得变化,不能直接监听路由，直接监听路由可能会导致数据延迟
			watchWidget(val) {
				if (this.reload === false) {
					this.init()
					this.$nextTick(() => {
						if (this.$refs.xTable) {
							this.$refs.xTable.init('ProductTable')
						}
					})
				}
				this.reload = false // 解决刷新浏览器，数据加载两次的问题
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	@import "./style.scss";
</style>